<template>
  <UserInfoComp>
    <div>简易留言板</div>
  </UserInfoComp>
  <div class="container">
    <ElCarousel height="250px">
      <!-- 轮播图的项 -->
      <ElCarouselItem>
        <img
          src="https://pic.ntimg.cn/file/20220326/25839194_095401590106_2.jpg"
          alt=""
        />
      </ElCarouselItem>

      <ElCarouselItem>
        <img
          src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg"
          alt=""
        />
      </ElCarouselItem>

      <ElCarouselItem>
        <img
          src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg"
          alt=""
        />
      </ElCarouselItem>
    </ElCarousel>
  </div>

  <br />

  <div>
    <ElCard class="box-card">
      <template #header>
        <div class="span">
          <span>最热</span>
          <span>最热</span>
          <span>最热</span>
        </div>

        <hr />
        <div class="header" v-for="d in list">
          <div>
            <ElAvatar :src="d.userInfo.img" fit="cover"></ElAvatar>
          </div>
          <div>
            <div>{{ d.user.username }}</div>
            <div>{{ Tools.formatDate(d.lastupdate) }}</div>
          </div>

          <div>
            <div class="title">
              <a
                @click="showDetail(d.umid)"
                href="javascript:void(0)"
                style="text-decoration: none"
              >
                <ElText size="large"> {{ d.title }}</ElText>
              </a>
            </div>

            <div class="info">
              <ElButton size="small" color="#626aef" :dark="isDark" plain
                ><span
                  ><el-icon><Star /></el-icon
                ></span>
                <span>{{ d.praiseCount }}</span>
              </ElButton>
              <ElButton size="small" color="#626aef" :dark="isDark" plain>
                <span
                  ><el-icon><Pointer /></el-icon>
                </span>
                <span>{{ d.hits }}</span>
              </ElButton>
              <ElButton size="small" color="#626aef" :dark="isDark" plain>
                <span
                  ><el-icon><ChatDotSquare /></el-icon
                ></span>
                <span>{{ d.replyCount }}</span>
              </ElButton>
            </div>
          </div>
        </div>
      </template>
      <PageComp :page="pageInfo" @page-change="query"></PageComp>
    </ElCard>
  </div>

  <div>
    <ElCard>
      <template #header>
        <div>网站咨询</div>
      </template>
      <div>
        <span>总留言数</span><span></span> 
        <span>本站总访问数</span><span></span>
        <span>最后更新时间</span><span></span>
      </div>
    </ElCard>
  </div>
</template>

<script lang="ts" setup>
import {
  ElText,
  ElCarouselItem,
  ElCarousel,
  ElForm,
  ElFormItem,
  ElInput,
  ElCard,
  ElAvatar,
  ElTag,
  ElButton,
} from 'element-plus';
import UserInfoComp from '../../components/UserInfoComp.vue';
import { ref } from 'vue';
import { ApiService } from '../../ts/ApiService';
import { Tools } from '../../ts/Tools';
import { BaseResult, PageInfo } from '../../ts/BaseResult';
import PageComp from '../../components/PageComp.vue';
import { router } from '../../router';

const pageInfo = ref(new PageInfo());
const queryinfo = ref({
  info: '',
  orderBy: 1,
});

const list = ref([]);

function query() {
  console.log(pageInfo.value);
  ApiService.post(
    '/message/queryAll',
    Tools.concatJson(pageInfo.value, queryinfo.value),
    (data: any) => {
      if (data.success) {
        pageInfo.value = data.page;
        list.value = data.list;
        return;
      }
    }
  );
}

function showDetail(umid) {
  router.push(`/user/messagedetail/${umid}`);
}

query();
</script>

<style lang="scss" scoped>
.container {
  width: 60rem;
  justify-content: center;
  align-items: center;
}
.el-carousel {
  width: 100%;
  margin: 0 6rem;
  text-align: center;
  overflow: hidden;
}

.el-carousel__item img {
  margin: 1rem 2.5rem;
  width: 56rem;
  height: 30rem;
}

.header {
  display: flex;
  align-items: flex-start;
  padding: 1rem;
}
.info {
  margin-left: 25rem;
  padding: 0.7rem;
  color: #949292;
}

.title {
  margin-left: 4rem;
}
.box-card {
  width: 56rem;
  margin: 1rem 8rem;
}

.span {
  padding: 0.5rem 1rem;
}
</style>
